<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Order from HERB</title>
        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

        <link rel="stylesheet" href="/web_menu/s/WebApp/Design/Render.css" />
{% if is_firefox %}
        <link rel="stylesheet" href="/web_menu/s/WebApp/Design/Firefox.css" />
{% endif %}
        <script type="text/javascript" src="/web_menu/s/WebApp/Action/Logic.js"></script>
        
        <script type="text/javascript">
        // These functions handle the updating of the Queue when it's onscreen.
        var queueIntervalId = 0;
	var can_place_new_order = ({{ order.state }}==1) || {{ order.state }}>3;

	var item_images=new Array();
        
        function startQueueUpdate(){
        	queueIntervalId = setInterval("updateQueue()", 10000); // calls updateQueue every 10 seconds
        }	
        
        // haven't used this yet, but if we want to cancel it, here it is
        function stopQueueUpdate(){
            clearInterval(queueIntervalId);
        }

function endsWith(s,str)
{
	if(s.length<str.length){ return false; }

	return s.substr(s.length-str.length,str.length)==str

}
        
        function updateQueue(){
          if (endsWith(document.location.toString(),"#_Queue") ){
            var url = "/web_menu/queue.xml#_Queue";

	    // Async call it with default params to emulate the same behavior as async link click!
            WA.Request(url, null, -1);
          }
          if (endsWith(document.location.toString(),"#_Ordered") ){
            var url = "/web_menu/myorder.xml#_Ordered";
	    // Async call it with default params to emulate the same behavior as async link click!
            WA.Request(url, null, -1);
	  }
       }
        
        //called when a drink is selected
        	function setDrink(drink, pic){
        		var drinkText = document.getElementById('theDrink');
        		drinkText.innerHTML=drink;
        		theDrinkPic.src = item_images[pic];
        	

        	        	}
        	
        	// update the queue
        

	function MyFunc(evt) {
	  if (evt.context[0] == "waQueue") {
            // Build the URL with WA.Postable
            var url = "/web_menu/queue.xml#_Queue";

	    // Async call it with default params to emulate the same behavior as async link click!
            WA.Request(url, null, -1);
          }else if( evt.context[0] == "waStatus") {
            // Build the URL with WA.Postable
            var url = "/web_menu/stats.xml#_Status";

	    // Async call it with default params to emulate the same behavior as async link click!
            WA.Request(url, null, -1);
          }else if( evt.context[0] == "waOrdered") {
            // Build the URL with WA.Postable
            var url = "/web_menu/myorder.xml#_Ordered";

	    // Async call it with default params to emulate the same behavior as async link click!
            WA.Request(url, null, -1);
          }else if( evt.context[0] == "waOrder") {
            // Build the URL with WA.Postable
            var url = "/web_menu/order/xml/?" + WA.Postable(["order_id"], evt.context);
	    // Async call it with default params to emulate the same behavior as async link click!
            WA.Request(url, null, -1); 
          }else if( evt.context[0] == "waHome") {

	    if( ! can_place_new_order )
	    {
		var url = "/web_menu/myorder.xml#_Ordered";

		// Async call it with default params to emulate the same behavior as async link click!
		WA.Request(url, null, -1);				 
            }
	  }
	}
	function test(evt){

	  if( ! can_place_new_order && evt.context[1][0]=='waHome')
  	  {   
	    var url = "/web_menu/myorder.xml#_Ordered";
 
    	    // Async call it with default params to emulate the same behavior as async link click!
	    WA.Request(url, null, -1);
	  }
          return false;

        }
	WA.AddEventListener("load", MyFunc);
	WA.AddEventListener("beginslide", test);




        </script>
        
        <script type="text/javascript">
        function selectDrink(){
          document.getElementById('drinkSelector').focus();
        }
         
        function drinkSelected(pic){
          var drinkPic = document.getElementById('theDrinkPic');
	  drinkPic.src = item_images[pic];
  	  drinkPic.height = 50;
        
        }
         
        function selectStation(){
          document.getElementById('stationSelector').focus();

        }
        function stationSelected(station){
          var stationPic = document.getElementById('theStationPic');

	  stationPic.src = "/web_menu/s/img/"+station+".png";
        
        }        
	function submit_order(){
	if(document.getElementById('stationSelector').value=="Bring it to the...")
	{
	return false;
	}
	if(document.getElementById('drinkSelector').value=="Choose a treat...")
	{
	return false;
	}
	order_is_new = 0;
	   return WA.Submit('placeOrderForm');
	}
        </script>
        


    </head>

    <body onload="startQueueUpdate();">
    <div id="WebApp">

        <div id="iHeader">
            <a href="#" id="waBackButton" >Back</a>
            <span id="waHeadTitle">HERB</span>
        </div>

        <div id="iGroup">

        <div class="iLayer" id="waHome" title="Home">
         <a href="/web_menu/queue.xml#_Queue" rev="async" rel="action" class="iButton iBClassic">Queue</a> 
         <a href="/web_menu/stats.xml#_Status" rev="async" rel="action" class="iButton iBClassic">Stats</a> 
         
		<div class="iMenu">
			 <h3 style="margin-top:20px">Order a drink from Herb...</h3>
			<form action="submit_order();" id="placeOrderForm">
			<ul class="iArrow">
			<!-- drink selection -->
				<li onclick="selectDrink();"><img src="/web_menu/s/img/treat.png" class="iFull" id="theDrinkPic" />
					<select class="myselect" id="drinkSelector" onchange="drinkSelected(this.options[this.selectedIndex].value);" name="drinkSelector">
						<option>Choose a treat...</option>
		  {% block drinkchoice %}
						<option value="1">Water</option>
  						<option value="2">Juice</option>
  						<option value="3">Diet Coke</option>
  						<option value="4">Beer</option>
				{% endblock %}
  					</select>
				</li>
			<!-- Station selection -->
				<li onclick="selectStation();"><img src="/web_menu/s/img/station.png" class="iFull" id="theStationPic" />
					<select class="myselect" id="stationSelector" onchange="stationSelected(this.options[this.selectedIndex].value);" name="stationSelector">
						<option>Bring it to the...</option>
		{% block locationchoice %}					
						<option value="1">Station 1</option>
						<option value="2">Station 2</option>
		{% endblock %}
					</select>
				</li>
				<li><label>Your name</label><input type="text" name="personname" /></li>
			</ul>
			</ul>
               <a href="#_Ordered"  class="iPush iBGreen" style="display:block;" onclick="return submit_order();" id="placeOrderBtn">Place Order</a>



			</form>
		</div><!-- end iMenu -->
       </div><!-- end home Layer -->
       
       <!-- begin queue layer -->
        
        <div class="iLayer" id="waQueue" title="Queue">
		<div class="iList" id="queue-list">
			<!-- <h2>Drinks</h2> -->
		</div>
	</div>
        <!-- end queue layer -->
        
        <!-- begin status layer -->
            <div class="iLayer" id="waStatus" title="Herb's Status">
		<div class="iList" id="status-list">
			<h2>Drink Info</h2>
			<ul class="iArrow">
				<li><em>I've served 13 drinks</em><small>3 diet cokes, 2 waters, 4 juices, 4 beers</small></li>
				<li><a href="#_Article"><em>List item two</em><small>Additional item info two</small></a></li>
			</ul>
			<h2>Info About me</h2>
			<ul class="iArrow">
				<li><a href="#_Article"><em>Content Here</em><small>Additional item info three</small></a></li>
				<li>This item has no link</li>
			</ul>
		</div>
	</div>
    	<!-- end status layer -->



     <!-- begin order placed layer -->
            <div class="iLayer" id="waOrdered" title="HERB Order">
		<div class="iList" id="ordered-content">
		</div>
	    </div>
              


     <!-- begin order placed layer -->
            <div class="iLayer" id="waOrder" title="HERB Order">
		<div class="iList" id="order-content">
		</div>
	    </div>
              
        
        


	

	</div><!-- end iGroup -->
    </div>

</body>
</html>
